<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
	<title></title>
	<style>
		.head-img {
			width: 100%;
			text-align: center;
		}
		.head-img img {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			-moz-border-radius: 50%;
    		-webkit-border-radius: 50%;
		}
		.list-ul {
			margin-top: 20px;
		}
		.list-li {
			display: flex;
			justify-content: space-between;
			padding: 15px 10px;
			color: #666666;
			border-bottom: 1px solid #ddd;
		}
		.label-group {
			margin-top: 20px;
		}
		.label-group .title {
			color: #666666;
		}
		.label-list {
			padding: 5px 10px;
		}
		.label-list .label {
			display: inline-block;
		    margin-right: 8px;
		    margin-bottom: 8px;
		    background-color: #d0f0ee;
		    color: #11B5AB;
		    font-size: 14px;
		    margin-top: 5px;
		    font-weight: normal;
		    padding: 4px 12px;
    		border-radius: 12px;
		}
		#articleInfo {
			display: none;
		}
		#myReadInfo {
			display: none;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="head-img">
			<img src="../../img/headimg.jpg" />
		</div>
		<ul class="list-ul">
			<li class="list-li">
				<div>姓名</div><div id="userName"></div>
			</li>
			<li class="list-li">
				<div>性别</div><div id="sex"></div>
			</li>
			<li class="list-li">
				<div>电话</div><div id="phone"></div>
			</li>
			<li class="list-li">
				<div>地址</div><div id="address"></div>
			</li>
			<div id="articleInfo">
				<li class="list-li">
					<div>成功指数</div><div id="impactPoints">0</div>
				</li>
				<li class="list-li">
					<div>转发朋友/群</div><div id="shareFriendNum">0</div>
				</li>
				<li class="list-li">
					<div>转发朋友圈</div><div id="shareFriendCircleNum">0</div>
				</li>
				<li class="list-li">
					<div>阅读次数</div><div id="readNum">0</div>
				</li>
				<li class="list-li">
					<div>阅读时长</div><div id="readTime">0</div>
				</li>
			</div>
			<div id="myReadInfo">
				<li class="list-li">
					<div>总阅读时长</div><div id="readTotleNum">0</div>
				</li>
			</div>
		</ul>
		<div class="label-group">
			<div class="title">标签</div>
			<div id="labelList" class="label-list">
				
			</div>
		</div>
		<div class="label-group">
			<div class="title">映像</div>
			<div id="improssionList" class="label-list">
				
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script>
		var userID,companyID,customerID,articleID;
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			customerID = base.getParameter("customerID");
			articleID = base.getParameter("articleID");
			if (articleID != null && articleID != "") {
				$("#articleInfo").show();
			}else{
				$("#myReadInfo").show();
			}
			base.postData(base.url.customerArticleInfo, {userID:userID,companyID:companyID,customerID:customerID,articleID:articleID}, callbackCustomerArticleInfo);
		});
		function callbackCustomerArticleInfo(data){
			if (data.success) {
				$(".head-img img").attr("src", data.context.headImgUrl);
				$("#userName").text(data.context.userName);
				$("#sex").text(data.context.sex==1?"男":data.context.sex==2?"女":"未知");
				$("#phone").text(data.context.phone||"");
				$("#address").text(data.context.area||"");
				if (articleID != null && articleID != "") {
					$("#impactPoints").text(data.context.impactPoints||0);
					$("#shareFriendNum").text(data.context.shareFriendNum||0);
					$("#shareFriendCircleNum").text(data.context.shareFriendCircleNum||0);
					$("#readNum").text(data.context.readNum||0);
					var readTime = "";
					if (data.context.readTime < 60) {
						readTime = data.context.readTime + "-" + (data.context.readTime + 10) + "秒";
					}else{
						readTime = parseInt(data.context.readTime/60);
						if (readTime < 2) {
							readTime = "1-2分钟";
						}else if (readTime < 5) {
							readTime = "2-5分钟";
						}else if (readTime >= 5) {
							readTime = "5分钟以上";
						}
					}
					$("#readTime").text(readTime)
				}else{
					var readTime = "";
					if (data.context.readTotleNum < 60) {
						readTime = data.context.readTotleNum + "-" + (data.context.readTotleNum + 10) + "秒";
					}else{
						readTime = parseInt(data.context.readTotleNum/60);
						if (readTime < 2) {
							readTime = "1-2分钟";
						}else if (readTime < 5) {
							readTime = "2-5分钟";
						}else if (readTime >= 5) {
							readTime = "5分钟以上";
						}
					}
					$("#readTotleNum").text(readTime);
				}
				var lableHtml = ""
				for(var item of data.context.lables) {
					lableHtml += '<span class="label label-default">'+item.lableName+'</span>'
				}
				$("#labelList").html(lableHtml);
				var customerImpressionListHtml = "";
				for(var item of data.context.customerImpressionList) {
					customerImpressionListHtml += '<span class="label label-default">'+item.impressionName+'</span>'
				}
				$("#improssionList").html(customerImpressionListHtml);
			}
		}
	</script>
</body>
</html>
